<template>
	<div style="display: flex;">
		<el-form-item style="padding-right: 10px;">
			<el-input v-model="keyword" placeholder="输入服务名称关键字" :suffix-icon="Search" />
		</el-form-item>
		<el-button type="primary" @click="onSearch">搜索</el-button>
		<el-button type="success" @click="dialogFormVisible = true">创建服务</el-button>
	</div>

	<el-dialog v-model="dialogFormVisible" title="选择服务类型">
		<el-form :model="form">
			<el-form-item>
				<el-radio-group v-model="form.type">
					<el-radio label="1">查询</el-radio>
					<el-radio label="2">写入</el-radio>
					<el-radio label="3">识别</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="onCreate">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>

	<el-table :data="showData" stripe style="width: 100%">
		<el-table-column prop="name" label="名称" width="180" />
		<el-table-column prop="note" label="描述" width="180" />
		<el-table-column prop="param_name" label="调用参数" />
		<el-table-column prop="createTime" label="创建时间" />
		<el-table-column prop="updateTime" label="修改时间" />
		<el-table-column label="操作">
			<template #default="scope">
				<el-button title="编辑" type="primary" :icon="Edit" size="small" circle plain
					@click="onEdit(scope.row)" />
				<el-button title="调用" type="success" :icon="DArrowRight" size="small" circle plain
					@click="onInvoke(scope.row)" :disabled="scope.row.status == 0" />
				<el-button :title="scope.row.status == 0 ? '上线' : '下线'" type="warning" :icon="SwitchButton" size="small"
					circle plain @click="onSwitch(scope.row.name, scope.row.status == 0)" />
				<el-button title="删除" type="danger" :icon="Delete" size="small" circle plain
					@click="onDelete(scope.row.name)" />
			</template>
		</el-table-column>
	</el-table>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { Search, Edit, DArrowRight, SwitchButton, Delete } from '@element-plus/icons-vue'
import { Success } from '../../util/message';
import Api from '../../util/axios';
import { ElMenuItem, ElMessageBox } from 'element-plus'
import { useService } from '../../stores/serviceStore';
import { useRouter } from 'vue-router';


const keyword = ref('')
const showData = reactive<any[]>([])
const tableData = reactive<any[]>([])
const router = useRouter()
const dialogFormVisible = ref(false)
const form = reactive({
	type: ''
})

const reload_service_list = async () => {
	await Api.post('show_api').then((res: any) => {
		tableData.length = 0
		res.forEach(element => {
			element['param_name'] = element.params.map(e => e['note'])
			tableData.push(element)
		});
		showData.length = 0
		showData.push(...tableData)
	})
}
onMounted(() => {
	reload_service_list()
})
const onSearch = () => {
	showData.length = 0
	let temp = tableData.filter(row => row.name.indexOf(keyword.value) != -1 || row.note.indexOf(keyword.value) != -1)
	showData.push(...temp)
}
const onCreate = () => {
	switch (form.type) {
		case "1":
			router.push({ name: 'create_service' })
			break;
		case "2":
			router.push({ name: 'create_insert_service' })
			break;
		case "3":
			router.push({ name: 'create_identify_service' })
			break;
	}
}
const save_service = (detail) => {
	useService().data = detail
}
const onEdit = (detail) => {
	save_service(detail)
	router.push({ name: 'edit_service' })
}
const onInvoke = (detail) => {
	save_service(detail)
	router.push({ name: 'invoke_service' })
}
const onSwitch = (apiName, status) => {
	ElMessageBox.confirm(
		status ? '是否确定下线该服务？' : '是否确定下线该服务？',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			Api.post(status ? 'online_api' : 'offline_api', {
				"apiName": apiName
			}).then((res: any) => {
				if (res.msg == 'success') {

					Success(status ? '上线成功' : '上线成功')
					reload_service_list()
				}
			})
		})
}
const onDelete = (apiName) => {
	ElMessageBox.confirm(
		'是否确定删除该服务？',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			Api.post('delete_api', {
				"apiName": apiName
			}).then((res: any) => {
				if (res.msg == 'success') {
					Success('删除成功')
					reload_service_list()
				}
			})
		})
}
</script>